5. User Controls
Accessibility Requirements
- WCAG2 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Test Method Rationale
The purpose of this Baseline test is to check the following accessibility properties of user controls:
- Name
- Role
- State
- Value
Limitations, Assumptions, or Exceptions
- User interface component is a part of the content that is perceived by users as a single control for a distinct function. User interface components include form elements and links as well as components generated by scripts. This test uses the term “user controls” for brevity.
- The accessibility properties of the user control must be correct if the user control changes.
- Per WCAG 2.2 Understanding SC 1.4.1 Use of Color authors cannot set the visited state of links. The anchor element does not include a “visited” attribute; therefore the author has no ability to alter the state through an attribute setting. Exclude visited/unvisited state of links from this Baseline test.
- Widget Roles of Accessible Rich Internet Applications (WAI-ARIA) lists roles that may be used for user controls. A “widget” is a “discrete user interface object with which the user can interact. Widgets range from simple objects that have one value or operation (e.g., check boxes and menu items), to complex objects that contain many managed sub-objects (e.g., trees and grids).”
- Widget Attributes of Accessible Rich Internet Applications (WAI-ARIA) lists state and property attributes for user interface elements found on GUI systems or in rich internet applications which receive user input and process user actions. These attributes are used to support the widget roles. The WAI ARIA specification explains “the values of properties (such as aria-labelledby) are often less likely to change throughout the application life-cycle than the values of states (such as aria-checked) which may change frequently due to user interaction.”
- In the Baseline Test instructions, where an ARIA role is identified, it is the first valid ARIA role attribute value.
5.A Test Procedure for Control Name
Baseline Test ID: 5.A-ControlName
Identify Content
Identify user controls for a distinct function. Exclude forms and links as these are covered by Baseline 10. Forms and Baseline 14. Links, respectively.
Test Instructions
- Check that the combination of the accessible name and accessible description is not empty. [SC 4.1.2]
- Check that the non-empty combination of the accessible name and accessible description describes the control's purpose. [SC 4.1.2] For details on the computation of the accessible name and accessible description, references include:
- HTML Accessibility API Mappings 1.0 for text
input
- HTML Accessibility API Mappings for
input
controls - HTML Accessibility API Mappings for
button
element - HTML Accessibility API Mappings for
input type="image"
- HTML Accessibility API Mappings for Other Form Elements
- HTML Accessibility API Mappings for Accessible Description Computation
- HTML Accessibility API Mappings 1.0 for text
- If the name of the user control changes on user interaction with the web content or application, repeat the previous test steps and check that the accessible name is correct after the change.
- Depending on the control, a change of name may be triggered by various actions, such as changing values or states of other components, toggling a function, entering data in the component, mouseover, etc.
- Examples include updating a response in a form field changes the name of a button to "Save Changes" and selecting a control toggles its functionality from sorting ascending to descending.
Test Results
If any of the above checks fail, then Baseline Test 5.A-ControlName fails.
5.B Test Procedure for Control Role
Baseline Test ID: 5.B-ControlRole
Identify Content
Identify user controls for a distinct function that have an explicit role attribute (role="[value]"
). Examples include forms, links, and toggle controls.
Test Instructions
- Check that the role of the user control is valid and appropriate for its function. [SC 4.1.2]
- Only the roles listed in Accessible Rich Internet Applications (WAI-ARIA) Section 5.3.2 Widget Roles are valid for user controls.
Test Results
If any of the above checks fail, then Baseline Test 5.B-ControlRole fails.
5.C Test Procedure for Control State
Baseline Test ID: 5.C-ControlState
Identify Content
Identify user controls for a distinct function that can be set by the user. Examples of such user controls include those that can be checked, expanded, hidden, and pressed. Exclude the visited/unvisited state of links.
Test Instructions
- Check that the state of the user control is correct. Attributes such as
hidden
,disabled
, and the use of WAI-ARIA state attributes must be used correctly. [SC 4.1.2] - If the state of the user control changes with use of the application, check that the state of the user control is correct after a change of state. [SC 4.1.2]
- Depending on the control, a change of state may be triggered by various actions, such as changing values or states of other components, toggling a function, entering data in the component, mouseover, etc.
- Examples include a disabled "Submit" button is enabled when all required form fields are filled in, a link becomes visible after a user-initiated calculation completes, a check box changes from checked to unchecked, a table column sort control is toggled from ascending to descending.
Test Results
If any of the above checks fail, then Baseline Test 5.C-ControlState fails.
5.D Test Procedure for Control Value
Baseline Test ID: 5.D-ControlValue
Identify Content
Identify controls that have a value that can be changed by a user. Examples include form fields and sliders.
Test Instructions
- Check that the value of the user control is correct. [SC 4.1.2]
- Modify the value of the user control. Depending on the control, a change of value may be performed by entering a number, selecting from a list of options, etc.
- Check that the value of the user control is correct after the user-initiated change of value. [SC 4.1.2]
Test Results
If any of the above checks fail, then Baseline Test 5.D-ControlValue fails.
Advisory: Tips for streamlined test processes
- Changes to controls may also include changes in color to convey information. If so, this test should check that the information is programmatically determinable. If color is used as the only visual means of conveying information (or changes in information), then the content would fail to meet SC 1.4.1 Use of Color (addressed in Baseline 7. Sensory Characteristics).
- The accessible name and accessible description of some user controls are tested in other Baseline tests, such as Baseline 10. Forms, Baseline 14. Links. For user controls that have dedicated Baseline Tests, please map to those tests for accessible name instead of 5.A-ControlName.
- This test may require interaction with controls to assess changes in name, role, state, value. Interaction instructions such as a test plan may be helpful.
WCAG 2.2 Techniques
The following sufficient techniques and/or common failures were considered when developing this test procedure for this baseline requirement: